<template>
<div style="height:100%;position: relative;background-color: #fff;">
<div class="topdiv">
  <div class="listdiv" style="-webkit-app-region:drag;">浏览器1.0测试版</div>
  
  
  <div class="listdiv" style="-webkit-app-region:drag;float:right;padding: 0 5px 0 16px;position: absolute;
    right: 0px;
    background-color: #eef1f6;margin-right:0px;">
    <a href="javascript:;" class="abutton" @click="gomini"><i class="iconfont icon-zuixiaohua aicon"></i></a>
    <a href="javascript:;" class="abutton" @click="gobig"><i class="iconfont icon-zuidahua1 aicon"></i></a>
    <a href="javascript:;" class="abutton" @click="closewin"><i class="iconfont icon-guanbi2 aicon"></i></a>
    <a href="javascript:;" class="abutton" @click="changebl"></a>
  </div>
</div>
<div style="height:100%;padding-top:30px;box-sizing:border-box;">
  
</div>
</div>
</template>

<script>
export default {
  name: 'favorite',
  data () {
    return {
      winlist: [],
      nowkey: '',
      screenWidth: window.outerWidth - 185,
      topDivWidth: 815
    }
  },
  methods: {
    changebl: function () {
      console.log(this.screenWidth)
      console.log(this.$refs.p.clientWidth)
    },
    gomini: function () {
      let win = this.H.electron.remote.BrowserWindow.getFocusedWindow()
      win.minimize()
    },
    gobig: function () {
      let win = this.H.electron.remote.BrowserWindow.getFocusedWindow()
      console.log(win.isFullScreen())
      if (win.isFullScreen()) {
        win.setFullScreen(false)
      } else {
        win.setFullScreen(true)
      }
    },
    closewin: function () {
      let win = this.H.electron.remote.BrowserWindow.getFocusedWindow()
      win.close()
    }
  },
  mounted: function () {
    this.pushurl({
      wid: '',
      iscontextmenu: false,
      show: true,
      title: '正在努力加载中。。。',
      src: 'static/loading.gif',
      url: 'http://www.baidu.com'
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .spanindex{
    background-color: #91dea8;
      color: #fff;
      padding: 3px;
      border-radius: 3px;
      margin-left: 5px;
      cursor: pointer;
  }
  .listdiv{
    transition: all .3s cubic-bezier(.645,.045,.355,1);
      border: 1px solid transparent;
      border-top: 0;
      margin-right: -1px;
      margin-left: -1px;
      padding: 0 16px;
      height: 30px;
      box-sizing: border-box;
      line-height: 30px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      color: #8391a5;
      position: relative;
      cursor: pointer;
      max-width: 200px;
      overflow: hidden;
      -webkit-app-region: no-drag;
  }
  .topdiv{
    height:30px;
    position: absolute;
    top: 0px;
    background-color: #eef1f6;
    border-bottom: 1px solid #d1dbe5;
    width: 100%;
    margin-bottom: -1px;
    white-space:nowrap;
    text-align: left;
    -webkit-app-region:drag;
    overflow: hidden;
  }
  .listdivspan{
      display: inline-block;
      list-style: none;
      font-size: 14px;
      color: #8391a5;
      position: relative;
      max-width: 130px;
      overflow: hidden;
  }
  body{
    margin:0px;
  }
  .is-active{
    background-color: #fff;
      border-right-color: #d1dbe5;
      border-left-color: #d1dbe5;
      color: #20a0ff;
  }
  .abutton{
    -webkit-app-region: no-drag;
    cursor: pointer;
    display: inline;
  }
</style>
